<!-- 推广商户详情 -->
<template>
	<view class="container">
		<view class="date">
			<view @click="datePickerShow">
				<text>{{user_time}}</text>
				<text class="cell-more yticon icon-xia"></text>
			</view>
		<text>当日收款金额</text>
		</view>
		<view class="listBox">
			<view class="item" v-for="(item,index) in list" :key="index">
					<text>{{item.pay_time}}</text>
					<text>￥ {{item.sum_price}}</text>
			</view>
		</view>
		<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		<w-picker mode="date" value="2020-04" :current="true" fields="month" @confirm="onConfirm($event)" @cancel="onCancel"
		 :disabled-after="true" ref="date"></w-picker>
	</view>
</template>

<script>
	import {
		everydaypaysum
	} from "@/api/user.js"
	import wPicker from "@/components/w-picker/w-picker.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			wPicker,
			uniLoadMore,
		},
		data() {
			return {
				id: 0,
				list: [],
				page: 1,
				limit: 10,
				user_time: "",
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			let myDate = new Date();
			let year = myDate.getFullYear()
			let month = myDate.getMonth() + 1
			if (month < 10) {
				month = '0' + month
			}
			this.user_time = year + '-' + month
			this.getList()
		},
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.getList();
		},
		methods: {
			getList() {
				everydaypaysum({
					seller_id: this.id,
					page: this.page,
					limit: this.limit,
					user_time: this.user_time,
				}).then(res => {
					this.loadStatus = "more";
					this.list.push.apply(this.list, res.data.list);
					if (res.data.list.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.list.length == 0) {
						this.nodata = true
						this.contentText.contentnomore = '暂无数据'
					} else {
						this.nodata = false
						this.contentText.contentnomore = '没有更多了'
					}
				})
			},
			onConfirm(e) {
				this.loadStatus = "loading";
				this.list = []
				this.page = 1
				this.user_time = e.value
				this.getList()
			},
			datePickerShow() {
				this.$refs.date.show()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;

		.date {
			position: sticky;
			top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			width: 690rpx;
			padding: 35rpx 30rpx;
			margin-left: -30rpx;
			background-color: #f5f5f5;

			view {
				margin-right: 40rpx;
				min-width: 140rpx;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				background: rgba(255, 255, 255, 1);
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 28rpx;
					color: rgba(51, 51, 51, 1);
					line-height: 40rpx;
				}

				text:nth-of-type(1) {
					margin-right: 4rpx;
				}
			}
			>text{
				font-size:28rpx;
				font-weight:bold;
				color:rgba(153,153,153,1);
			}
		}

		.listBox {
			.item {
				height: 150rpx;
				line-height: 150rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f5f5f5;
				text:nth-of-type(1){
					font-size:32rpx;
					color:rgba(51,51,51,1);
				}
				text:nth-of-type(2){
					font-size:36rpx;
					font-weight:bold;
					color:rgba(51,51,51,1);
				}
				
			}

			.item:nth-of-type(1) {
				border-top: 1rpx solid #f5f5f5;
			}
		}
	}
</style>
